<template lang='pug'>
table
  tr.color-header
    td 分区
    td 颜色
    td(v-if="isEditing") 操作
  tr(v-for="(tRow, index) in colorTable" :key="index")
    td
      input.form-control.table-input(type="text" :readOnly="!isEditing || !canEdit" v-model="tRow.name")
    td
      input(
        type="color"
        v-model="tRow.color"
        :disabled="!isEditing")
    td(v-show="isEditing")
      //- div(v-show="isEditing || selPolygonId === tRow.id")
      button.btn.btn-xs.btn-complete(
        @click="$emit('updateArea', tRow)") 保存
      button.btn.btn-xs(v-if="canEdit"
        @click="$emit('deleteArea', tRow)") 删除
  tr(v-if="!colorTable.length")
    td(:colspan="isEditing ? 3 : 2") 暂无数据
</template>

<script>
/**
 * @name 分区管理-多表单、颜色选择器嵌套表格
 * @author linmn
 * @ 地图新增色块之后生成新的行数据，可编辑名称，颜色
*/
export default {
  name: 'AreaTable',
  data () {
    return {}
  },
  props: {
    colorTable: {
      type: Array,
      default: () => ([])
    },
    isEditing: {
      type: Boolean,
      default: false
    },
    canEdit: {
      type: Boolean,
      default: false
    },
    selPolygonId: {
      type: Number,
      default: -1
    }
  }
}
</script>

<style lang='sass' scoped>
table
  border: 1px solid #dfdfdf
  background: #fff
  width: 90%
  margin: 20px 15px
  text-align: center
  line-height: 32px
  color: #555555
  font-size: 14px
  .color-header
    background: #e8ecef
    border: 1px solid #d1d1d1
  tr
    width: 50%
    &:hover, &:hover>td>.table-input
      background: #eaeff3
    &:nth(2n)
      td
        background: #f7f8fa
    td
      margin: 15px
    td:not(:last-child)
      border-right: 1px solid #d1d1d1
  tr:not(:last-child)
    border-bottom: 1px solid #d1d1d1
  .color-picker
    margin: 20px 0 20px 20px
  .table-input
    width: 105px
    color: #626262
    background: #fff
    border: 0
    margin: 0
</style>
